<template>
	<view class="storePage d-flex f-column" :style="{'--color': color}">
		<status-bar title='选择门店'></status-bar>
		<view class="search viewbox bgf8 margin20 d-flex a-center">
			<view class="d-flex a-center" @click="toUrl('/orderPage/Addresslist/cityList')">
				<text class="size26 bold p-right6">{{ cityName }}</text>
				<text class="iconfont icon-xiasanjiaoxing h6"></text>
			</view>
			<view class="line"></view>
			<text class="iconfont icon-btn_search m-right10"></text>
			<input class="flex-1 size28" v-model="keywords" confirm-type="search" placeholder="输入门店名称或地址搜索"
				@focus="isFlag = false" @confirm="handleConfirm" />
			<view class="size28 color_44 p-left20" @click="handleCancel" v-if="!isFlag">取消</view>
		</view>
		<block v-if="isFlag">
			<!-- 地图组件 -->
			<map id="myMap" :longitude="longitude" :latitude="latitude" :markers="markers" show-location v-if="!isFold">
				<!-- 覆盖在原生组件上的图片视图 -->
				<!-- <cover-image class="control" :src="$pop.staticImg('backOrigin.png')" @click="handleReturn"></cover-image> -->
			</map>
			<view class="p-left8 p-bot24 p-top24 p-re">
				<u-tabs :list="tabList" :current="current" :lineColor="color" @click="tabClick"></u-tabs>
				<view class="toggle padding20 color_66 p-ab" @click="isFold = !isFold">
					<text class="m-right10">{{ isFold ? '展开' : '收起' }}地图</text>
					<text class="iconfont h6" :class="isFold ? 'icon-xiangxia' : 'icon-xiangshang'"></text>
				</view>
			</view>
			<view class="flex-1 bgf8 padding30" style="overflow-y: auto;">
				<view class="bor_radius_18 padding40-30 m-bot20 d-flex p-re"
					:class="item.can_choose == 1 ? 'bgwhite' : 'notSelected'" @click="handleSelect(item)"
					v-for="(item,index) in nearList" :key="index">
					<view class="label p-ab thmeBg white padding2-14 bor_radius_6" v-if="!index && !is_collect">距离最近
					</view>
					<view class="flex-1 p-right30">
						<view class="size30 bold m-bot20" :class="item.can_choose == 1 ? 'color_33' : 'color_66'">
							{{ item.name }}
						</view>
						<view class="h6 color_99">{{ item.address }}</view>
						<view class="h6 color_99 m-top10" v-if="item.runTime">营业时间：{{ item.runTime }}</view>
					</view>
					<view class="text-right">
						<view class="size26 color_66" v-if="item.distance">{{ item.distance }}km</view>
						<view class="m-top40">
							<view class="btn bgf8 m-right30" v-if="item.phone" @click.stop="Call(item)">
								<text class="iconfont icon-dianhua size30"></text>
							</view>
							<view class="btn bgf8" @click.stop="locate(item)">
								<text class="iconfont icon-wodeluxian size30"></text>
							</view>
						</view>
					</view>
				</view>

				<emptys v-if="noData" title="暂无相关的门店数据哦~"></emptys>
			</view>
		</block>
		<view class="flex-1 bgf8 padding30" style="overflow-y: auto;" v-else>
			<view class="bgwhite bor_radius_18 padding40-30 m-bot20 d-flex" @click="handleSelect(item)"
				v-for="(item,index) in searchList" :key="index">
				<view class="flex-1 p-right30">
					<view class="size30 color_33 bold m-bot20">{{ item.name }}</view>
					<view class="h6 color_99">{{ item.address }}</view>
					<view class="h6 color_99 m-top10" v-if="item.runTime">营业时间：{{ item.runTime }}</view>
				</view>
				<view class="text-right">
					<view class="size26 color_66" v-if="item.distance">{{ item.distance }}km</view>
					<view class="m-top40">
						<view class="btn bgf8 m-right30" v-if="item.phone" @click.stop="Call(item)">
							<text class="iconfont icon-dianhua size30"></text>
						</view>
						<view class="btn bgf8" @click.stop="locate(item)">
							<text class="iconfont icon-wodeluxian size30"></text>
						</view>
					</view>
				</view>
			</view>

			<emptys v-if="noData1" empty="search" title="暂无相关结果，请尝试更换关键字"></emptys>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	// import QQMapWX from '@/common/qqmap-wx-jssdk.min.js'
	// let qqmapsdk
	export default {
		data() {
			return {
				cityName: '重庆',
				keywords: '',
				isFlag: true, // 搜索中为false
				isFold: false,
				longitude: 0, // (距离最近)标记点的经纬度
				latitude: 0,
				markers: [],
				tabList: [{
						name: '附近'
					},
					// {
					// 	name: '收藏'
					// }
				],
				current: 0,
				nearList: [],
				searchList: [],
				is_collect: '',
				noData: false,
				noData1: false,
				shopsid: '',
				id: '',
			}
		},
		computed: {
			...mapState(['position', 'CityInfo', 'color'])
		},
		onLoad(opt) {
			if (opt.id) this.id = opt.id;


		},
		async onShow() {

			await this.$pop.getLocation()
			if (this.CityInfo) this.cityName = this.CityInfo.name
			this.getStores()
		},
		methods: {
			getStores() {
				this.noData = false
				this.markers = []
				this.$http.get({
					url: '/TimeCardApi/getStores',
					data: {
						id: this.id,
						sort_type: 'distance',
						is_collect: this.is_collect,
						city: this.cityName

					}
				}).then(res => {
					this.nearList = res.data || []
					if (!this.nearList.length) return this.noData = true
					// 添加标记点
					this.markers = this.nearList.map(item => {
						return {
							id: parseFloat(item.shop_id),
							latitude: parseFloat(item.pointy),
							longitude: parseFloat(item.pointx),
							iconPath: this.$imgUrls(item.logo),
							width: 30,
							height: 30,
							callout: {
								content: item.name,
								borderRadius: 2,
								padding: 5,
								display: 'ALWAYS'
							}
						}
					})
					this.longitude = this.markers[0].longitude
					this.latitude = this.markers[0].latitude
				})
			},
			tabClick({
				index
			}) {
				this.is_collect = index || ''
				this.current = index
				this.getList()
			},
			handleCancel() {
				this.isFlag = true
				this.keywords = ''
				this.searchList = []
			},
			locate(item) {
				uni.openLocation({
					latitude: parseFloat(item.pointy),
					longitude: parseFloat(item.pointx),
					name: item.name,
					address: item.address,
					complete(res) {
						console.log(res)
					}
				})
			},
			handleConfirm(e) {
				if (!e.detail.value) return
				this.noData1 = false
				this.$http.post({
					url: '/singleSaleApi/shopList',
					data: {
						// bussId: '',
						sort_type: 'distance',
						keywords: this.keywords,
						city: this.cityName,
						shopsid: this.shopsid
					}
				}).then(res => {
					this.searchList = res.data || []
					if (!this.searchList.length) this.noData1 = true
				})

				// let that = this
				// qqmapsdk.search({ // 周边搜索
				//     keyword: e.detail.value,
				//     location: `${that.latitude},${that.longitude}`,
				//     region: that.cityName,
				//     auto_extend: '0', // 不扩大范围
				//     success(res){
				//         that.searchList = res.data || []
				//     }
				// })
			},
			handleSelect(item) {

				let pages = getCurrentPages()
				console.log(pages, 'pages');
				let prevPage = pages[pages.length - 2]
				console.log(prevPage, 'prevPage');
				prevPage.onLoad({
					shop_id: item.shop_id
				})
				this.$back()

			},
			handleReturn() {
				// 必须申请调用getLocation
				uni.createMapContext('myMap', this).moveToLocation({
					longitude: this.position.longitude,
					latitude: this.position.latitude
				})
			},
			reverseGeocoder(lat, lng) {
				let that = this
				qqmapsdk.reverseGeocoder({ // 逆地址解析(坐标转地址)
					location: `${lat},${lng}`,
					get_poi: 1,
					success(res) {
						if (res.status != 0) return that.$Toast(res.message)
						that.cityName = res.result.ad_info.city // 初始化要用经纬度换取城市
						that.nearList = res.result.pois || []
					}
				})
			},
			regionchange(e) {
				console.log('触发', e)
				if (e.type == 'end') { // 拖动结束
					const result = e.detail.centerLocation
					this.reverseGeocoder(result.latitude, result.longitude)
				}
			},
			Call(Item) {
				if (this.rescue == 1) {
					this.$http.post({
						url: '/rescueApi/saveContactLog ',
						data: {
							shop_id: Item.shop_id
						}
					}).then(res => {
						if (res.code != 200) return this.$Toast(res.msg)
					})
				}
				this.$common.Tel(Item.phone)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.storePage {
		height: 100vh;
	}

	.search {
		height: 72rpx;
		border-radius: 36rpx;
		padding: 0 30rpx;

		.line {
			width: 1rpx;
			height: 30rpx;
			background: #999;
			margin: 0 20rpx;
		}
	}

	#myMap {
		width: 100%;
		height: 500rpx;
		position: relative;
	}

	.control {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 20rpx;
		bottom: 50rpx;
	}

	.toggle {
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}

	.btn {
		display: inline-block;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 50%;
		text-align: center;
	}

	.label {
		top: -10rpx;
		right: -4rpx;
	}

	.notSelected {
		background: #f6f6f6 !important;
		border: 1rpx solid #eee;
	}
</style>